<template>
  <div class="tab-bar-item" v-on:click="itemClick">
    <div v-if="isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <!--当isActive为真时，添加active类-->
    <!--这样绑定活跃类的写法是死的，现在需要直接绑定样式-->
    <!-- <div v-bind:class="{active:isActive}">-->
    <!--    <div v-bind:style="this.isActive ? {color:this.activeColor}:{}">-->
    <div v-bind:style="activeStyle">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      path: {
        type: String,
      },
      activeColor: {
        type: String,
        default: 'red'
      }
    },
    computed: {
      isActive() {
        //返回的是true或者false值
        return this.$route.path.indexOf(this.path) !== -1;
      },
      activeStyle() {
        return this.isActive ? {color: this.activeColor} : {}
      }
    },
    data() {
      return {
        //isActive: true,
      }
    }
    ,
    methods: {
      itemClick() {
        //console.log(this.path);
        this.$router.replace(this.path).catch(err => err);
      }
    }
  }
</script>

<style scoped>
  /* .active {
     color: blue;
   }*/
</style>
